<template>
<div>
    <el-card class="box-card">
        <el-form :model="credential" :rules="credentialRules" ref="credential" label-width="" class="demo-userInfo">
            <!--检测输入用户年龄-->
            <el-form-item style="width: 400px;margin-left: 30px" label="" prop="credentialInfo">
                <el-input v-model="credential.credentialInfo" placeholder="请输入执业证书编号">
                    <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item label="" style="margin-left: 30px" prop="imgUrl">
                <img :src="credential.imgUrl" style="float:left;width: 220px;height: 145px;border-radius: 10px">
                <!--上传组件开始-->
                <el-upload v-model="credential.imgUrl"
                           action="http://192.168.88.130:28082/upload/image/user-avatar"
                           name="file"
                           :limit=1
                           list-type="picture-card"
                           :on-preview="handlePictureCardPreview"
                           :on-success="handleSuccess"
                           :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <!--上传组件结束-->
            </el-form-item>

            <el-form-item>
                <el-button type="success" style="width: 330px;margin-left: 50px"
                           @click="submitCredentialForm('credential')">保存信息</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</template>

<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
    data(){
        return {
            imageUrl: '',
            loginInfo:[],
            dialogImageUrl: '',
            dialogVisible: false,
            credential:{
                credentialInfo:'',
                imgUrl:''
            },
            credentialRules:{
                credentialInfo: [
                    { required: true, message: '请输入执业证书编号', trigger: 'blur' },
                ],
                imgUrl:[
                    { required: true, message: '上传执业证书照片', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        handleRemove(file, fileList) {
            this.imageUrl="";
            console.log(file,fileList);
            let url=BaseUrl.POST_DOCTOR+'/doctor/info/remove?url='+file.response.data;
            TokenAxios.post(url).then((response)=>{
                if (response.data.state===20000){
                    this.$message.success("服务器文件删除成功");
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        submitCredentialForm(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let upload={
                        credentialInfo:this.credential.credentialInfo}

                    if (this.credential.imgUrl!==null){
                        console.log("imageUrl="+this.imageUrl);
                        upload.imgUrl=this.credential.imgUrl;
                        this.credential.imgUrl=this.imageUrl;
                    }
                    let url=BaseUrl.POST_DOCTOR+'/doctor/info/insert';
                    console.log(url);
                    TokenAxios.post(url,upload).then((response)=>{
                        if (response.data.state===20000){
                            // localStorage.this.loginInfo=JSON.stringify(this.loginInfo);
                            localStorage.setItem('loginInfo', JSON.stringify(this.loginInfo))
                            location.reload();
                            console.log(this.credential)
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleSuccess(response,file,fileList){
            this.imageUrl=response.data.url;
            this.credential.imgUrl=response.data.url;
            console.log(this.imageUrl)
        },
        loadCurrentLoginInfo(){
            let loginInfoString=localStorage.getItem('loginInfo')

            this.loginInfo = JSON.parse(loginInfoString);
            if (!this.loginInfo) {
                this.$router.push('/login/user');
                return;
            }else if (this.loginInfo.role!==3&&this.loginInfo.role!==4){
                this.$message.error('无权访问');
                this.$router.push('/home');
                return;
            }


        },
        //获取医生证书信息
        loadCredential(){
            let url=BaseUrl.POST_DOCTOR+'/doctor/info/list';
            console.log(url);
            TokenAxios.get(url).then((response)=>{
                if (response.data.data){
                    this.credential=response.data.data;
                    console.log(this.credential)
                }
            })
        }
    },
    created() {
    },
    mounted() {
        this.loadCurrentLoginInfo();
        this.loadCredential();
    }
}
</script>
<style>
body{
    background-color: rgb(241,242,243);
}
</style>
